<template>
  <div class="skill-specialties">
    <h3>技能特长</h3>
    <el-form :model="skillsForm" label-width="120px">
      <el-form-item label="自定义特长">
        <el-input v-model="customSkill" placeholder="请输入自定义特长">
          <template v-slot:append>
            <el-button @click="addCustomSkill">添加</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div v-for="(skill, index) in customSkills" :key="index" class="custom-skill-item">
      <span>{{ skill.name }}</span>
      <el-select v-model="skill.level" placeholder="请选择熟练等级" style="width: 120px;">
        <el-option label="一般" value="一般"></el-option>
        <el-option label="良好" value="良好"></el-option>
        <el-option label="熟练" value="熟练"></el-option>
        <el-option label="擅长" value="擅长"></el-option>
        <el-option label="精通" value="精通"></el-option>
      </el-select>
      <el-button type="text" @click="removeCustomSkill(index)">删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customSkill: '',
      customSkills: []
    };
  },
  methods: {
    addCustomSkill() {
      if (this.customSkill.trim() !== '') {
        this.customSkills.push({ name: this.customSkill, level: '一般' });
        this.customSkill = '';
      }
    },
    removeCustomSkill(index) {
      this.customSkills.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.skill-specialties {
  margin-bottom: 20px;
}
.custom-skill-item {
  margin-top: 10px;
}
</style>



